import React, { useState } from 'react';
import { Spin, Modal, message, Button, Tooltip, Space } from 'antd';
import { Scrollbars } from 'react-custom-scrollbars';
import { Document, Page, pdfjs } from 'react-pdf';
import {
  PlusCircleOutlined,
  MinusCircleOutlined,
  LeftOutlined,
  RightOutlined,
  FullscreenOutlined,
} from '@ant-design/icons';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

export interface PdfProps {
  url: string;
  icon?: any;
  text: any;
  width?: number;
  height?: number;
  disabled: boolean;
}
const PdfReader: React.FC<PdfProps> = (props: PdfProps) => {
  const [visible, setVisible] = useState<boolean>(false);
  const [pageWidth, setPageWidth] = useState<number>(600);
  const [pageNumber, setPageNumber] = useState<number>(1);
  const [pageTotal, setPageTotal] = useState<number>(1);
  const switchModal = () => {
    setVisible(!visible);
  };
  const onDocumentLoadSuccess = (info: any) => {
    message.success('load success');
    setPageTotal(info._pdfInfo.numPages);
  };
  const onDocumentLoadFail = () => {
    message.error('load fail');
  };
  const zoomIn = () => {
    if (pageWidth <= 600) {
      return;
    }
    setPageWidth(pageWidth * 0.8);
  };
  const zoomOut = () => {
    setPageWidth(pageWidth * 1.2);
  };
  const zoomFit = () => {
    setPageWidth(props.width ? props.width : 600);
  };
  const pagePre = () => {
    if (pageNumber <= 1) {
      return;
    }
    setPageNumber(pageNumber - 1);
  };
  const pageNext = () => {
    setPageNumber(pageNumber + 1);
  };
  React.useEffect(() => {
    setPageWidth(props.width ? props.width : 600);
  }, []);
  return (
    <>
      <Button type="primary" onClick={switchModal} icon={props.icon} disabled={props.disabled}>
        {props.text}
      </Button>
      <Modal
        title="图纸浏览"
        visible={visible}
        destroyOnClose={true}
        onCancel={switchModal}
        footer={false}
        width={props.width}
        bodyStyle={{ padding: 0, height: props.height }}
      >
        <div
          style={{
            margin: '0px auto',
            padding: '5px',
            backgroundColor: '#444',
            textAlign: 'center',
          }}
        >
          <Space>
            <Button type="text" size="small" style={{ color: '#fff' }}>
              {pageNumber} / {pageTotal}
            </Button>
            <Tooltip title="上一页">
              <Button
                type="text"
                icon={<LeftOutlined style={{ color: '#fff' }} />}
                onClick={pagePre}
                disabled={pageNumber <= 1}
              />
            </Tooltip>
            <Tooltip title="下一页">
              <Button
                type="text"
                icon={<RightOutlined style={{ color: '#fff' }} />}
                onClick={pageNext}
                disabled={pageNumber >= pageTotal}
              />
            </Tooltip>
            <Tooltip title="放大">
              <Button
                type="text"
                icon={<PlusCircleOutlined style={{ color: '#fff' }} />}
                onClick={zoomOut}
              />
            </Tooltip>
            <Tooltip title="缩小">
              <Button
                type="text"
                icon={<MinusCircleOutlined style={{ color: '#fff' }} />}
                onClick={zoomIn}
              />
            </Tooltip>
            <Tooltip title="适合宽度">
              <Button
                type="text"
                icon={<FullscreenOutlined  style={{ color: '#fff' }} />}
                onClick={zoomFit}
              />
            </Tooltip>
          </Space>
        </div>
        <Scrollbars autoHide style={{ height: props.height, width: '100%' }}>
          <Document
            //文件路径,
            file={props.url}
            //加载成功调用
            onLoadSuccess={onDocumentLoadSuccess}
            //加载失败调用
            onLoadError={onDocumentLoadFail}
            //加载提示
            loading={
              <div style={{ padding: '100px', textAlign: 'center' }}>
                <Spin />
              </div>
            }
          >
            <Page pageNumber={pageNumber} width={pageWidth} loading={<Spin />} />
          </Document>
        </Scrollbars>
      </Modal>
    </>
  );
};
export default PdfReader;
